<template>
  <el-card>
    <!-- 页面 -->
    <div>
      <div class="search">
        物料编号: <el-input
          v-model="in_materialNumber"
          placeholder="请输入物料编号"
          size="small"
          clearable
        ></el-input>
        物料名称: <el-input
          v-model="in_materialName"
          placeholder="请输入物料名称"
          size="small"
          clearable
        ></el-input>

        <el-button
          class="detail"
          icon="el-icon-search"
          @click="checkMaterial"
          size="small"
          >查询</el-button
        >
        <el-button class="rePassword" icon="el-icon-refresh-right" size="small"
          >重置</el-button
        >
      </div>
      <div class="box">
        <el-table
          stripe
          ref="multipleTable"
          :data="data"
          tooltip-effect="dark"
          :row-style="{ height: '60px', padding: '0 0' }"
          style="width: 100%"
          border
        >
          <el-table-column prop="materialNumber" label="物料编号" width="204">
            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column prop="materialName" label="物料名称" width="500">
          </el-table-column>
          <el-table-column
            prop="materialNum"
            label="库存数"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="unit" label="单位" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="materialWeight"
            label="重量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                class="addUser"
                size="small"
                @click="checkDetail(scope)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 详情弹出框 -->
        <el-dialog title="物料详情" :visible.sync="detailForm" width="600px">
          <el-form :model="detailData">
            <el-form-item label="物料编号" :label-width="formLabelWidth">
              <el-input
                v-model="detailData.materialNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="物料名称" :label-width="formLabelWidth">
              <el-input
                v-model="detailData.materialName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="库存数" :label-width="formLabelWidth">
              <el-input
                v-model="detailData.materialNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="单位" :label-width="formLabelWidth">
              <el-input v-model="detailData.unit" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="重量" :label-width="formLabelWidth">
              <el-input
                v-model="detailData.materialWeight"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="detailForm = false">返回</el-button>
          </div>
        </el-dialog>

        <!-- 分页功能 -->
        <el-pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page="page"
          :page-sizes="[3, 5, 10, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      in_materialNumber: "",
      in_materialName: "",
      data: [],
      total: 0,
      pageSize: 10,
      page: 1,
      formLabelWidth: "200px",
      detailData: {},
      detailForm: false,
    };
  },

  // 方法
  methods: {
    // 获取当前页数
    pageChange(e) {
      this.page = e;
      if (this.in_materialNumber != "" || this.in_materialName != "") {
        this.axios({
          url: `/material/materialFindList/${this.page}/${this.pageSize}`,
          method: "get",
          params: {
            materialNumber: this.in_materialNumber,
            materialName: this.in_materialName,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.data = res.data.data.list;
            this.total = res.data.data.total;
          }
        });
      } else {
        this.axios({
          url: `/material/materialFindList/${this.page}/${this.pageSize}`,
        }).then((res) => {
          // console.log(res);
          this.data = res.data.data.list;
          this.total = res.data.data.total;
        });
      }
    },

    sizeChange(e) {
      this.pageSize = e;
      if (this.in_materialNumber != "" || this.in_materialName != "") {
        this.axios({
          url: `/material/materialFindList/${this.page}/${this.pageSize}`,
          method: "get",
          params: {
            materialNumber: this.in_materialNumber,
            materialName: this.in_materialName,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.data = res.data.data.list;
            this.total = res.data.data.total;
          }
        });
      } else {
        this.axios({
          url: `/material/materialFindList/${this.page}/${this.pageSize}`,
        }).then((res) => {
          // console.log(res);
          this.data = res.data.data.list;
          this.total = res.data.data.total;
        });
      }
    },

    // 查询物料详情
    checkDetail(scope) {
      this.detailForm = true;
      this.axios({
        url: `/material/materialFindById/${scope.row.materialId}`,
        mtehod: "get",
      }).then((res) => {
        if (res.data.code == 200) {
          console.log(res);
          this.detailData = res.data.data.materialInfo;
        }
      });
    },

    // 查询物料
    checkMaterial() {
      this.axios({
        url: `/material/materialFindList/${this.page}/${this.pageSize}`,
        method: "get",
        params: {
          materialName: this.in_materialName,
          materialNumber: this.in_materialNumber,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          // console.log(res);
          if (this.in_materialNumber != "" || this.in_materialName != "") {
            console.log(res.data.data);
            if (res.data.data.list.length == 0) {
              this.$message({
                type: "error",
                message: "查询失败，请确保物料编号(名称)输入正确",
              });
            } else {
              this.data = res.data.data.list;
              this.total = res.data.data.total;
              this.$message({
                type: "success",
                message: "查询成功",
              });
            }
          } else {
            this.$message({
              type: "error",
              message: "查询失败，请确保物料编号(名称)输入正确",
            });
          }
        }
      });
    },
  },

  // 挂载的时候进行请求
  mounted() {
    this.axios({
      url: `/material/materialFindList/${this.page}/${this.pageSize}`,
    }).then((res) => {
      // console.log(res);
      this.data = res.data.data.list;
      this.total = res.data.data.total;
    });
  },

  //计算
  // computed: {
  //   tableData: function () {
  //     return this.data.slice(
  //       (this.page - 1) * this.pageSize,
  //       this.pageSize * this.page
  //     );
  //   },
  // },
};
</script>



<style scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}
.search {
  border-top: 2px solid #9999;
  padding-top: 30px;
  margin-top: 15px;
}
.box {
  padding-top: 30px;
}
.el-pagination {
  margin-top: 25px;
  float: right;
}
.el-table .cell {
  text-align: center;
}
.el-table /deep/ td .cell,
.el-table /deep/ th .cell {
  text-align: center;
}
</style>
